// 商品
<template>
  <div style="padding-top:10px;">
    <div class="order" v-for="(order,index) in orderList" :key="`order_${index}`">
      <div class="detail">
        <p>日期:{{order.dateline}}</p>
        <p>合计:{{getCount(order.orderDetailList)}}</p>
      </div>
      <div class="detail" v-for="(detail,ind) in order.orderDetailList" :key="`detail_${ind}`">
        <p>商品名称:{{detail.commodity.productName}}</p>
        <p>原产地:{{detail.commodity.placeOfOrigin}}</p>
        <p>价格:{{detail.realPrice}}</p>
        <p>购买数量:{{detail.number}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrder } from '@/api/user'

export default {
  name: 'home',
  components: {
  },
  data () {
    return {
      orderList: []
    }
  },
  methods: {
    queryData () {
      getOrder({
        userId: this.$store.state.userInfo.id
      }).then(res => {
        if (res.code === 1) {
          this.orderList = res.data
        } else {
          this.orderList = []
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getCount (arr) {
      let count = 0
      arr.forEach(element => {
        count += element.realPrice * element.number
      })
      return count
    }

  },
  mounted () {
    this.queryData()
  }
}
</script>
<style lang="less">
.order {
  border-radius: 5px;
  padding: 10px;
  border: 1px solid gainsboro;
  margin-bottom: 10px;
  background: #fff;
  .detail {
    text-align: left;
    padding: 5px 0;
    border-bottom: 1px solid gainsboro;
  }
}
.order .detail:last-child {
  border-bottom: none;
}
</style>
